<template>
  <div class="tobeDone">
    <tableIndex
      :tableData="tableData"
      :tableHead="tableHead"
      :isIndex="true"
      :isSelection="true"
      ref="tableIndexRef"
      :isRadio="false"
      :fields="fields"
      :height="500"
      :page="page"
      @selectChange="selectChange"
      @searchList="searchList"
      @page-change="pageChange"
    >
      <template #right-btn>
        <div style="float: right">
          <el-button size="small" plain class="button_edit" @click="addHandler"
            ><svg-icon icon-class="add-icon-1" class="m-r5" />添加</el-button
          >
          <el-button
            size="small"
            plain
            class="button_edit"
            @click="onExport(getSearch())"
            ><svg-icon icon-class="export" class="m-r5" />一键导出</el-button
          >
        </div>
      </template>
      <template #operate>
        <el-table-column label="操作" width="300" align="center" fixed="right">
          <template #default="{ row }">
            <el-button
              v-if="row.status == -1"
              size="small"
              class="button_edit"
              @click="issueHandler(row)"
              type="primary"
              >下发</el-button
            >
            <el-button
              size="small"
              class="button_funtion"
              @click="updateDialog(row)"
              type="primary"
              >设置</el-button
            >
            <el-button
              size="small"
              class="button_view"
              @click="updateHandler(row)"
              type="primary"
              >周报详情</el-button
            >
            <el-button
              size="small"
              class="button_delete"
              @click="deleteHandler(row)"
              type="primary"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
    </tableIndex>

    <!-- 查看弹窗 建设部工作周报 -->
    <view-popover ref="viewPopoverRef" @refreshList="getPage"></view-popover>
  </div>
</template>

<script setup>
import TableIndex from '@/components/table/index.vue'
import ViewPopover from '@/views/constructionProjectManage/weeklyReport/components/ViewPopover.vue'
import { weeklyApi } from '@/api/project'
import { useRouter } from 'vue-router'
import { ref, onMounted, reactive } from 'vue'
import { deriveHandelFnc } from '@/hooks/downCommon'

import { ElButton, ElMessageBox, ElMessage } from 'element-plus'
const page = reactive({
  page: 1,
  pageSize: 50,
  total: 0
})
const fields = ref([
{
  key: 'title',
    label: '周报名称',
    type: 'input',
    placeholder: '根据周报名称模糊查询'
  },
  {
    key: 'startTime-endTime',
    label: '时间范围查询',
    type: 'datetimerange',
    placeholder: '时间范围查询'
  }
])
let tableData = ref([])
let tableHead = ref([
  {
    prop: 'title',
    label: '名称',
    width: '180'
  },
  {
    prop: 'startTime',
    label: '时间范围',
    width: '200',
    formatter: (row) => {
      return row.startTime + '至' + row.endTime
    }
  },
  {
    prop: 'completeRatio',
    label: '已填写人数/总数',
    width: 150,
  },
  {
    prop: 'deadline',
    label: '截止时间'
  },
  {
    prop: 'createTime',
    label: '创建时间'
  },
  {
    prop: 'createUserName',
    label: '创建人'
  },
  {
    prop: 'status',
    label: '状态',
    formatter: (row) => {
      return row.status == -1 ? '未下发' : '已下发'
    }
  }
])
let activeName = ref('0')
const tableIndexRef = ref(null)
//获取列表组件搜索数据
const getSearch = () => {
  return tableIndexRef.value.getSearchData()
}
const exportConfig = reactive({
  fileName: '部门周报管理',
  apiPath: 'buildDepartmentExport',
  form: {}
})
const { onExport } = deriveHandelFnc(exportConfig)
const selectChange = (e) => {
  // console.log(e)
}

//路由跳转
let router = useRouter()

//编辑
const updateHandler = (row) => {
  router.push({
    path: `/constructionProjectManage/weeklyReport/components/constructionDetails/departmentWeeklyId=${row.departmentWeeklyId}`
  })
}
//删除
const deleteHandler = (row) => {
  ElMessageBox.confirm('是否删除该周报？', '提示', {
    confirmButtonText: '确定',
    confirmButtonClass: "button_view",
    cancelButtonText: '取消',
    cancelButtonClass: "button_cancel2",
    type: 'warning'
  })
    .then(() => {
      weeklyApi
        .deleteWeekly({departmentWeeklyId:row.departmentWeeklyId})
        .then((res) => {
          if (res.code === '200') {
            ElMessage.success('删除成功')
            getPage()
          }
        })
        .catch(() => {})
    })
    .catch(() => {})
}
// 下发
const issueHandler = async (row) => {
  await weeklyApi
    .updateWeeklyStatus(row.departmentWeeklyId)
    .then((res) => {
      if (res.code == 200) {
        ElMessage.success('下发成功')
        getPage()
      }
    })
}

const viewPopoverRef = ref(null)
const addHandler = () => {
  viewPopoverRef.value.open({ type: '建设部' ,isAdd:true})
}
const updateDialog = (row) => {
  viewPopoverRef.value.open({ type: '建设部',isAdd:false },row)
}

//搜索接口请求
const searchList = (e) => {
  getPage(e)
}
//分页接口请求
const getPage = (e) => {
  weeklyApi
    .getWeekPageList({
      pageNum: page.page,
      pageSize: page.pageSize,
      param: getSearch()
    })
    .then((res) => {
      if (res.code == 200) {
        tableData.value = res.data.content
        page.total = res.data.totalSize
        // console.log(tableData)
      }
    })
}
//分页
const pageChange = (e) => {
  // console.log(e)
  page.page = e.page
  page.pageSize = e.limit

  getPage(page)
}

onMounted(() => {
  getPage()
})
</script>

<style lang="scss" scoped>
.tobeDone {
  width: 100%;
}
</style>
